Prettier is an opinionated code formatter with support for:
- JavaScript, including ES2017
- JSX
- Flow
- TypeScript
- CSS, Less, and SCSS
- JSON
- GraphQL
- Markdown, including GFM
- YAML
Prettier 是程式碼格式化工具,可設定為存檔時自動格式化,不用再浪費時間手動格式化程式碼。同時也能夠統一團隊程式碼風格,並且可以根據團隊規範,去調整相關設定規則。一般常見的團隊規範如下:
使用 Prettier 這種自動格式化工具,才能確保團隊規範的落實。下面是 Prettier 格式化的範例圖
也能支援 JSX
CSS 樣式檔也能格式化
我們可以將 Prettier 結合 GIT,提交前將程式碼格式化。也可以結合編輯器,直接在存檔時就格式化。這邊介紹的方式是使用 VSCODE 來設置 Prettier
在 VSCODE 的擴充功能面板搜尋 Prettier 就可以找到,我們安裝 Prettier - Code formatter
這個版本。
在 VSCODE 設定檔新增下方的配置
{
'editor.formatOnSave': true,
'prettier.singleQuote': true,
'prettier.semi': false,
'prettier.printWidth': 120,
'prettier.trailingComma': 'es5',
'prettier.tabWidth': 4
}
formatOnSave
儲存時自動格式化singleQuote
使用單引號semi
結束是否加分號printWidth
行寬trailingComma
尾隨逗號tabWidth
縮排空幾格
這邊要注意 VSCODE 有分為 使用者設定
與 工作區設定
,Prettier 我們設定在工作區設定,by 專案來配置,才不會影響到現有的一些舊專案。